// 领导首页
<template>
  <div class="box">
    <!-- 最新进展 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>最新进展</span>
      </div>
      <div>
        <el-table :data="tableData" stripe style="width: 100%" border="">
          <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
          <el-table-column prop="name" label="项目名称" min-width="300">
            <template slot-scope="scope">
              <el-link type="success" @click="onWork(scope.row)">{{ scope.row.name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="jb" label="级别" min-width="180"> </el-table-column>
          <el-table-column prop="ly" label="来源" min-width="180"> </el-table-column>
          <el-table-column prop="pj" label="平均完成" min-width="180"> </el-table-column>
          <el-table-column prop="date" label="最后更新时间" min-width="180"> </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 近期需填报任务 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>近期需填报任务</span>
      </div>
      <div>
        <el-table :data="tableData2" stripe style="width: 100%">
          <el-table-column prop="name" label="任务标题">
            <template slot-scope="scope">
              <el-link type="success" @click="onClickTwo(scope.row)">{{ scope.row.name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="name2" label="预期标志性成果"> </el-table-column>
          <el-table-column prop="date" label="截至日期" width="180"> </el-table-column>
          <el-table-column prop="cust" label="责任人" width="180"> </el-table-column>
          <el-table-column prop="day" label="剩余天数" width="180">
            <template slot-scope="scope">
              <el-tag type="warning" disable-transitions>{{ scope.row.day }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 超期未填报任务 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>超期未填报任务</span>
      </div>
      <div>
        <el-table :data="tableData3" stripe style="width: 100%">
          <el-table-column prop="name" label="任务标题">
            <template slot-scope="scope">
              <el-link type="success" @click="onClickThree(scope.row)">{{ scope.row.name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="name2" label="预期标志性成果"> </el-table-column>
          <el-table-column prop="date" label="截至日期" width="180"> </el-table-column>
          <el-table-column prop="cust" label="责任人" width="180"> </el-table-column>
          <el-table-column prop="day" label="剩余天数" width="180">
            <template slot-scope="scope">
              <el-tag type="danger" disable-transitions>{{ scope.row.day }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card>
          <div ref="echart1" id="echart1" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card>
          <div ref="echart2" id="echart2" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'EmployeeHome',
  data() {
    return {
      tableData: [
        { name: '2025XXX行动', jb: '集团级', ly: '其他', pj: '80%', date: '2025-04-14' },
        { name: '2024XXX行动', jb: '集团级', ly: '其他', pj: '70%', date: '2025-05-14' },
        { name: '2023XXX行动', jb: '集团级', ly: '其他', pj: '50%', date: '2025-06-14' }
      ],
      tableData2: [
        {
          name: '深入谋划"十五五"发展规划',
          name2: '1.集团“十五五”发展初步思路',
          date: '2025-03-05',
          cust: '张XX',
          day: 15
        }
      ],
      tableData3: [
        {
          name: '深入谋划"十五五"发展规划',
          name2: '2.集团“十五五”规划总体框架',
          date: '2025-05-05',
          cust: '张XX',
          day: 10
        }
      ],
      echart1: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      },
      echart2: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '70%'],
            // adjust the start and end angle
            startAngle: 180,
            endAngle: 360,
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.onChart1()
    this.onChart2()
  },
  methods: {
    onWork(data) {
      console.log(data)
      this.$router.push('/Three/Tasklist/ImportDetailsC')
    },
    onClickTwo(data) {
      console.log(data)
      this.$router.push('/Three/Tasklist/TasklistAddC')
    },
    onClickThree(data) {
      console.log(data)
      this.$router.push('/Three/Tasklist/TasklistAddC')
    },
    onChart1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echart1'))
      // 绘制图表
      myChart.setOption(this.echart1)
    },
    onChart2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echart2'))
      // 绘制图表
      myChart.setOption(this.echart2)
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  margin-bottom: 20px;
  background-color: transparent;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

#todo-col {
  padding: 0 20px 20px 0;
}
#Fill-col {
  padding: 10px 20px 0 0;
}
#todo-task {
  padding: 0 20px 20px 0;
}
#Fill-Echart {
  padding: 10px 20px 0 0;
}

.task-card {
  overflow: auto;
  height: 310px;
}
.task-div {
  padding-bottom: 15px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
.red {
  background: lightyellow;
}
</style>
